<template>
  <main class="">
    <section class="headerBar w-full h-full flex">
      <div class="title text-xl md:text-2xl text-white font-black ml-18 mt-5    ">焊接专家知识库智能应用云平台</div>
      <div class="btns  ml-auto w-[21%] flex items-center">
        <Search v-if="showSearch" class="mt-1 cursor-pointer " @click="toggleSearchBar" />
        <el-button class="setSize h-full mt-2" :class="[button.text == '登录' ? '-!ml-3' : '', button.curr ? 'curClass' : '']"
          size="large" v-for="button in buttons" :key="button.text" @click="handleClick(button.click)" :type="button.type"
          :text="button.type == '' ? true : false">{{
            button.text }}</el-button>
      </div>
    </section>
  </main>
</template>

<script lang="ts" setup>
import Search from '@/components/search/index.vue'
// import searchBar from '@/components/search/searchBar.vue'

let router = useRouter()
const emit = defineEmits(['toggleSearchBar', 'linkTo'])
let { buttons, showSearch } = defineProps({
  buttons: Array<{ text: string, type: string, click: string, curr?: string }>,
  showSearch: Boolean,
})
//showSearchBar: Boolean,

const handleClick = (c: string) => {
  // console.log(c, '1')
  emit('linkTo', { flag: c })
}
const toggleSearchBar = () => {
  emit('toggleSearchBar')
}
</script>

<style lang='scss'>
.setSize {
  --el-font-size-base: 23px;
  --el-button-text-color: #fff;
}

.el-button.is-text:hover {
  --el-button-text-color: #000080 !important;
}

.el-button:last-of-type {
  margin-left: 0px !important;
}
.curClass {
  background-color:  rgba($color: #1f4efa, $alpha: 0.4) !important;
  color: antiquewhite;
}
</style>